<template>
	<view class="content">
		<view class="addcollbox">
			<view class="colllist" v-for="item,inx in carDataList" :key="inx">
				<view class="collimg">
					<img src="../../static/card_icon.png" alt="" style="margin-top: 14rpx;" v-if="item.bank_type == 1">
					<img src="../../static/dcep_icon.png" alt="" style="margin-top: 14rpx;" v-if="item.bank_type == 2">
				</view>
				<view class="listtxt">
					<view>账户押金 {{item.all_money}}USDT</view>
					<view>账户名称 {{item.banknumber}}</view>
					<view>姓名 {{item.busername}}</view>
					<view>开户银行 {{item.bankname}}</view>
					<view>开户支行 {{item.branch}}</view>
				</view>
				<view class="swich">
					<view class="switch_txt">{{item.switchValue ? '已开启' : '未匹配'}}</view>
					<u-switch v-model="item.switchValue" size="14" activeColor="#4d4e63" inactiveColor="#4d4e63" @change="switchChange(item)" style="margin-top: 3rpx;"></u-switch>
				</view>
				<view class="createcoll iconfont icon-xiugai1" @click="modcollection(item)"></view>
			</view>
			<view class="collection_btn">
				<u-button type="primary" class="btn" icon="plus-circle" iconColor="#9595a1" color="#343247" text="添加收款方式"  @click="collection"></u-button>
			</view>
		</view>
	
		<view class="collliuchen">
			<view class="liutitle">订单自动匹配说明</view>
			<view class="liulist">1、系统只会匹配<押金金额的订单;</view>
			<view class="liulist">2、自动匹配成功的订单支付方式为押金自动支付;</view>
			<view class="liulist">3、押金低于190USDT将无法匹配订单。</view>
			<view class="liu_title">以订单金额300USDT，USDT单价￥10举例</view>
			<view class="liuchengimg">
				<view class="img_left">
					<view class="left_top">
						<view>存入自动匹配订单押金</view>
						<view>例如:1000USDT</view>
						<view class="iconfont liuch_img icon-arrow-right1"></view>
					</view>
					<view class="left_center">
						<view>卖方收款</view>
						<view>￥3000</view>
						<view class="iconfont liuch_img icon-arrow-right1-copy"></view>
					</view>
					<view class="left_top">
						<view>自动扣除押金</view>
						<view style="margin-top: -40rpx;">扣除306USDT(6USDT作为平台服务费，300USDT付给卖家)</view>
						<view class="iconfont liuch_img icon-arrow-right1" style="top: 90rpx;"></view>
					</view>
				</view>
				<view class="img_right">
					<view class="left_top" style="border: #e98b71 solid 2rpx;background-color: #ffe6df;">
						<view style="color: #e98b71;">自动匹配订单<1000USDT </view>
						<view>￥3000</view>
						<view class="iconfont liuch_img icon-arrow-right1-copy"></view>
					</view>
					<view class="left_center">
						<view>买方打款</view>
						<view>￥3000</view>
						<view class="iconfont liuch_img icon-arrow-right1-copy1"></view>
					</view>
					<view class="left_top" style="border: #e98b71 solid 2rpx;background-color: #ffe6df;">
						<view style="line-height: 80rpx;color: #e98b71;">交易完成</view>
						<view style="margin-top: 40rpx;">买家匹配订单保证金剩余:694USDT</view>
					</view>
				</view>
				
			</view>
		</view>
		
		<view class="collliuchen">
			<view class="liutitle liutitle2">押金退还说明</view>
			<view class="liulist">1、卡内押金在订单完成时，会自动扣减用于支付订单金额。
			当押金不足以支付订单金额时，可以使用押金及钱包余额进行组合支付，优先扣减账户押金;</view>
			<view class="liulist" style="padding-bottom: 20rpx;">2、当账户不使用时，删除账户后，账户内的押金会自动退回到钱包余额;</view>
		</view>
		<view style="height: 80rpx;"></view>
		
		
		<u-modal :show="alertShow" content='确认开启匹配' confirmText="确认" cancelText="取消"
			:showCancelButton = "true" confirmColor="0e99a1" cancelColor="#0e99a1"
		></u-modal>
		
		<botLine />
	</view>
</template>

<script>
	import botLine from '../../components/botLine.vue'
	export default {
		components:{
			botLine
		},
		data() {
			return {
				carDataList : [],
				alertShow : false,
			}
		},
		onLoad() {
			let cookies = JSON.parse(localStorage.getItem("cookies"))
			this.cardlistFn(cookies&&cookies[0].uid);
		},
		methods: {
			subsectionChange(v){
				console.log(v)
				this.current = v
			},
			switchChange(v){
				console.log(v)
				this.alertShow = true;
			},
			collection(){
				uni.navigateTo({
				    url:`/pages/collectionway/index?type="center"`
				});
			},
			modcollection(){
				uni.navigateTo({
				    url:`/pages/modcollection/index?content=${'收款方式'}`
				});
			},
			// 接口
			// 获取卡片接口
			cardlistFn(uid){
				uni.request({
					url:'/index/api/get_cardlist',
					method:'post',
					data:{uid:uid},
					success:res=>{
						res.data.info.map((item,inx)=>{
							item.switchValue = false;
						})
						this.carDataList = res.data.info;
					}
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.content{
	background-color: #f1f5f8;
	.addcollbox{padding:10px 20rpx;
		background-color: #343247;border-left-bottom-radius:20rpx;border-right-bottom-radius:20rpx;
		.colllist{display: flex;padding: 20rpx;position: relative;border-radius:20rpx;margin-bottom: 10rpx;
			background: url(../../static/bg.png) no-repeat center top;background-size: cover;
			.collimg{border-radius: 50%;text-align: center;
				width: 96rpx;height: 96rpx;background:#fff ;
				
			}
			.listtxt{
				flex: 1;padding-left: 20rpx;padding-top: 5rpx;
				view{
					color: #9fa2b5;font-size: 20rpx;line-height: 40rpx;
				}
			}
			.swich{
				display: flex;
				.switch_txt{font-size: 22rpx;color: #fff;padding-right:15rpx;}
			}
			.createcoll{
				position: absolute;right:20rpx;bottom: 20rpx;color: #fff;font-weight: 400;
			}
		}
		.collection_btn{
			.btn{
				/deep/.u-button__text span{color:#c3c2d4;}
			}
		}
	}
	
	.collliuchen{border-radius: 20rpx;margin: 20rpx 20rpx 0 20rpx;background-color: #fff;
		.liutitle{border-top-left-radius: 20rpx;border-top-right-radius: 20rpx;
			height: 70rpx;line-height: 70rpx;color: #61bb98;padding-left:20rpx;
			background: linear-gradient(to right, #cbefe3, #fff);margin-bottom: 10rpx;
			&.liutitle2{color: #f0895c;
				background: linear-gradient(to right, #fcdbd2, #fff);
			}
		}
		.liulist{
			color: #9c9899;font-size: 24rpx;line-height: 40rpx;padding-left: 20rpx;
		}
		.liu_title{
			color: #000;line-height: 70rpx;font-size: 26rpx;text-align: center;padding: 10rpx 0;
		}
		.liuchengimg{display: flex;padding-bottom: 60rpx;
			.img_left{
				flex: 1;padding:0 30rpx;
			}
			.img_right{
				flex: 1;padding:0 30rpx;
			}
			.left_top{position: relative;
				border: #63b89b solid 2rpx;background-color: #ddf2e9;padding: 10rpx 5rpx;border-radius: 15rpx;
				view:nth-child(1){
					color: #67ad93;font-size: 28rpx;height: 80rpx;line-height: 40rpx;text-align: center;
				}
				view:nth-child(2){
					color: #000;font-size: 28rpx;line-height: 40rpx;text-align: center;
				}
			}
			.left_center{position: relative;
				border: #e98b71 solid 2rpx;background-color: #ffe6df;padding: 10rpx 5rpx;border-radius: 15rpx;
				margin: 60rpx 0;
				view:nth-child(1){
					color: #ef8470;font-size: 28rpx;height: 40rpx;line-height: 30rpx;text-align: center;
				}
				view:nth-child(2){
					color: #000;font-size: 28rpx;height: 30rpx;line-height: 30rpx;text-align: center;
				}
			}
			.liuch_img{
				position: absolute;color: #e4e4e4;font-size: 45rpx;
				&.icon-arrow-right1{right: -55rpx;top: 50rpx;}
				&.icon-arrow-right1-copy{left: 120rpx;bottom: -55rpx;}
				&.icon-arrow-right1-copy1{left: -55rpx;top: 25rpx;}
			}
		}
	}
	
}
</style>